<template>
	<com-popup v-if="props.show" ref="popup" title="就诊人" :action="false" @close="emits('close')">
	    <view class="gy-patient-select">
	        <view class="gy-patient-item" v-for="(item,index) in list" :key="index" @click.stop="selectFn(item)">
	            <com-avatar :src="item.avatar" :size="80" :radius="50" />
	            <view class="gy-patient-item-info">{{ item.name }}</view>
	            <view class="gy-patient-item-info">{{ item.sex === 1 ? "男" : item.sex === 2 ? "女" : "未知" }}</view>
	            <view class="gy-patient-item-info">{{ proxy.utils.date.age(item.birthday) }}</view>
	        </view>
	        <view v-if="list.length < maxBindNumber" class="gy-patient-create" @click.stop="goCreateFn">
	            <view class="gy-patient-create-icon">
	                <com-icon name="gy_icon_plus" />
	            </view>
	            新添加就诊人
	        </view>
	    </view>
	</com-popup>
</template>

<script lang="ts" setup>

	import {
		ref,
		computed,
		getCurrentInstance
	} from "vue";

	const { proxy }: any = getCurrentInstance();

	const popup: any = ref(null);

	const emits = defineEmits(["close","select"]);

	const props = defineProps({
		show: {
			type: Boolean,
			default: false
		}
	});

	const maxBindNumber = ref(proxy.utils.system.getConfig("patient.maxnum.peraccount") || 10);

	const list = computed(() => proxy.store.patient.list);

	function goCreateFn(){
		proxy.utils.uni.route.go("/pages-personal/my-patient/bind");
		popup.value?.closeFn();
	}

	function selectFn(item: any){
		proxy.store.switchPatient(item);
		emits("select", item);
		popup.value?.closeFn();
	}

	defineExpose({
		closeFn: () => {
			popup.value?.closeFn();
		}
	});

</script>

<style lang="scss" scoped>
	.gy-patient-select{
	    font-weight: 400;
		font-size: var(--gy-font-size-medium);
	    .gy-patient-item{
	        height: 140rpx;
	        padding: 0 var(--gy-gap);
	        @include flex-start-center;
			border-top: 1rpx solid var(--gy-card-line-color);
	        .gy-patient-item-info{
	            margin-left: 20rpx;
	        }
	    }
	    .gy-patient-item:active{
	        background-color: var(--gy-card-line-color);
	    }
	    .gy-patient-create{
	        height: 140rpx;
	        padding: 0 var(--gy-gap);
	        border-top: 1rpx solid var(--gy-card-line-color);
	        @include flex-start-center;
	        .gy-patient-create-icon{
	            width: 80rpx;
	            height: 80rpx;
	            @include flex-center-center;
	            background: rgba(236,236,236,0.69);
	            border-radius: 50%;
	            margin-right: 20rpx;
	        }
	    }
	    .gy-patient-create:active{
	        background-color: var(--gy-card-line-color);
	    }
	}
</style>
